<template>
	<view class="content">
		<view class="u-page">
			<u-list>
				<u-list-item v-for="(item, index) in historyData" :key="index">
					<u-cell :title="item.infoDate">
						<u-avatar
							slot="icon"
							shape="square"
							size="35"
							src="/static/yz.png"
							customStyle="margin: -3px 5px -3px 0"
						></u-avatar>
					</u-cell>
					<u-row justify="space-between" customStyle="margin: 0px 0px 0px 40px">
						<u-col span="6">
							<view class="demo-layout bg-purple">+{{item.infoCourse}}课时</view>
						</u-col>
						<u-col span="6">
							<view class="demo-layout bg-purple">充值¥{{item.infoMoney}}</view>
						</u-col>
					</u-row>
					<u-row justify="space-between" customStyle="margin: 0px 0px 0px 40px">
						<u-col span="12">
							<text class="u-line-1">备注：{{item.infoRemark}}</text>
						</u-col>
					</u-row>
				</u-list-item>
				<u-divider text="剩余课时"></u-divider>
				<u-row justify="space-between" customStyle="margin: 0px 0px 0px 40px">
					<u-col span="12">
						<text class="u-line-1">剩余课时：{{notUsedCourse==null?'暂未报名':notUsedCourse+'课时'}}</text>
					</u-col>
				</u-row>
			</u-list>
		</view>
	</view>
</template>

<script>
import {ip,port} from '@/ipconfig.js'
export default {
	data() {
		return {
			historyData: [
				// {
				// 	infoDate: '2023/03/01',
				// 	infoCourse: '40',
				// 	infoMoney: '4000',
				// 	infoRemark: '无'
				// },
				// {
				// 	infoDate: '2023/03/01',
				// 	infoCourse: '40',
				// 	infoMoney: '40000',
				// 	infoRemark: '无'
				// },
			],
			notUsedCourse: 33,
		};
	},
	onLoad(id) {
		let that = this;
		let stuId;
		if(id == null || id.id == null){
			uni.getStorage({
				key:'id-key',
				success: (res) => {
					stuId = res.data;
				}
			})
		}else{
			uni.setStorage({
				key: "id-key",
				data: id.id,
				success: () => {
					console.log("id已缓存");
				}
			});
			stuId = id.id;
		}
		uni.request({
			// url:`/api/student/student/history/${stuId}`,
			url:`${ip}:${port}/student/student/history/${stuId}`,
			method: "GET",
			sslVerify:false,
			success: (res) => {
				if(res.statusCode && res.statusCode != 200){
					uni.showToast({
						icon:'none',
						title:res.errMsg
					})
					return;
				}
				console.log(res.data.data);
				that.historyData = res.data.data.historyData;
				that.notUsedCourse = res.data.data.notUsedCourse;
				// for(let i = 0; i < res.data.historyData.length; i++){
				// 	that.historyData.push(res.data.historyData[i])
				// }
			},
			fail: (err) => {
				uni.showToast({
					icon:'none',
					title:err
				})
				return;
			}
		});
	},
	methods: {}
};
</script>

<style>
.content {
	/* text-align: center; */
	/* background-image: url('/static/main-bg.jpg'); */
	background-image: url("");
	height: 100%;
}
</style>
